"use client";

import { useState } from "react";
import { Card, Input, Button, Tag } from "antd";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
import Link from "next/link";

interface Dataset {
  id: string;
  name: string;
  description: string;
  documentCount: number;
  lastUpdated: string;
}

const MOCK_DATASETS: Dataset[] = [
  {
    id: "1",
    name: "产品文档",
    description: "包含所有产品相关的文档和说明",
    documentCount: 42,
    lastUpdated: "2024-03-20",
  },
  {
    id: "2",
    name: "技术规范",
    description: "技术架构和API文档",
    documentCount: 15,
    lastUpdated: "2024-03-19",
  },
];

export default function KnowledgePage() {
  const [searchQuery, setSearchQuery] = useState("");
  const [datasets] = useState<Dataset[]>(MOCK_DATASETS);

  const filteredDatasets = datasets.filter(
    (dataset) =>
      dataset.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      dataset.description.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="p-6">
      {/* 顶部操作栏 */}
      <div className="flex justify-between mb-6">
        <Input
          prefix={<SearchOutlined />}
          placeholder="搜索知识库..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="max-w-md"
        />
        <Button type="primary" icon={<PlusOutlined />}>
          创建知识库
        </Button>
      </div>

      {/* 知识库列表 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filteredDatasets.map((dataset) => (
          <Link key={dataset.id} href={`/knowledge/${dataset.id}`}>
            <Card hoverable className="h-full">
              <div className="flex justify-between items-start mb-2">
                <h3 className="text-lg font-medium">{dataset.name}</h3>
                <Tag color="blue">{dataset.documentCount} 文档</Tag>
              </div>
              <p className="text-gray-600 mb-4">{dataset.description}</p>
              <div className="text-sm text-gray-500">
                最后更新：{dataset.lastUpdated}
              </div>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}
